<?php

use yii\helpers\Html;
use yii\helpers\Url;


?>
<?= Html::jsFile('@web/js/vue.js') ?>
<?= Html::cssFile('@web/css/element_ui.css') ?>
<?= Html::jsFile('@web/js/element_ui.js') ?>
<?= Html::jsFile('@web/js/axios.min.js') ?>

<div id="app">
    <el-row :gutter="20">
        <el-col :span="8">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <el-row :gutter="20" type="flex" class="row-bg" justify="space-between" style="align-items: center">
                        <el-col :span="16"><span>访视列表</span></el-col>
                        <el-col :span="8" style="text-align: right">
                            <el-button type="text" @click="switchSubject" style="padding: 0">切换受试者</el-button>
                        </el-col>
                    </el-row>
                </div>
                <div v-for="item in visit_list" class="text item">
                    <el-row :gutter="20" justify="space-between">
                        <el-col :span="16">
                            <el-button type="text" @click="tabList(item)">{{ item.visit_name }}</el-button>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                </div>
            </el-card>
        </el-col>
        <el-col :span="16">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <el-row type="flex" class="row-bg" justify="space-between" style="align-items: center">
                        <el-col :span="12"><span>{{ visit.name }}</span></el-col>
                        <el-col :span="8" style="text-align: right">
                            <!--                            <el-button type="text">批量签名</el-button>-->
                            <!--                            <el-button type="text">批量SDV</el-button>-->
                            <el-button type="text" @click="batchCheckAction">批量核查</el-button>
                            <el-button type="text">批量锁定</el-button>
                            <el-button type="text">批量解锁</el-button>
                        </el-col>
                    </el-row>
                </div>
                <div class="text item">
                    <el-table
                            :data="tab_list"
                            stripe
                            height="800"
                            class="my-el-table"
                            @row-click="openDetails">
                        <el-table-column
                                prop="tab_name"
                                label="数据域名称(E)">
                        </el-table-column>
                        <el-table-column
                                prop="tab_content"
                                label="数据域标签">
                        </el-table-column>
                        <el-table-column label="数据域状态">
                            <template slot-scope="scope">
                                <span>
                                    <span v-if="Number(scope.row.tab_status) === 1"
                                          @click="handleEdit(scope.$index, scope.row)"
                                          class="glyphicon glyphicon-unchecked" aria-hidden="true"
                                          style="color:gray;"></span>
                                    <span v-else-if="Number(scope.row.tab_status) === 2"
                                          class="glyphicon glyphicon-tasks" aria-hidden="true"
                                          style="color:#19C3FB;"></span>
                                    <span v-else-if="Number(scope.row.tab_status) === 3"
                                          class="glyphicon glyphicon-saved" aria-hidden="true"
                                          style="color:blue;"></span>
                                    <span v-else-if="Number(scope.row.tab_status) === 4"
                                          class="glyphicon glyphicon-fast-forward" aria-hidden="true"
                                          style="color:#AF8704;"></span>
                                    <span v-else-if="Number(scope.row.tab_status) === 5"
                                          class="glyphicon glyphicon-star" aria-hidden="true"
                                          style="color:#07690B;"></span>
                                    <span v-else-if="Number(scope.row.tab_status) === 6"
                                          class="glyphicon glyphicon-lock" aria-hidden="true"
                                          style="color:green;"></span>
                                    <span v-else class="glyphicon glyphicon-screenshot" aria-hidden="true"
                                          style="color:green;"></span>
                                </span>
                                <span>
                                    <span v-if="Number(scope.row.sdv_status) === 1" class="glyphicon glyphicon-check"
                                          aria-hidden="true"
                                          style="color:gray;"></span>
                                    <span v-else class="glyphicon glyphicon-check" aria-hidden="true"
                                          style="color:green;"></span>
                                </span>
                                <span>
                                    <span v-if="Number(scope.row.check_status) === 1"
                                          class="glyphicon glyphicon-ok-sign" aria-hidden="true"
                                          style="color:gray;"></span>
                                    <span v-else class="glyphicon glyphicon-ok-sign" aria-hidden="true"
                                          style="color:green;"></span>
                                </span>
                                <span>
                                    <span v-if="Number(scope.row.query_status) === 1"
                                          class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"
                                          style="color: red;"></span>
                                    <span v-else-if="Number(scope.row.query_status) === 2"
                                          class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"
                                          style="color: #f59a23;"></span>
                                    <span v-else class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"
                                          style="color: #337ab7;"></spanv-else>
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="数据域操作">
                            <template slot-scope="scope">
                                <el-button @click.native.stop="tabCheck(scope.row)" type="text">核查</el-button>
                                <el-button @click.native.stop="tabLock(scope.row)" type="text">锁定</el-button>
                                <el-button type="text" @click.native.stop="tabUnlock(scope.row)">解锁</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-card>
        </el-col>
    </el-row>
    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%">
        <span>{{dialogContent}}</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogConfirm">确 定</el-button>
        </span>
    </el-dialog>
    <el-dialog title="切换受试者" :visible.sync="dialogSubjectVisible">
        <el-table
                :data="subject_list.filter(data => !search || data.seq.toLowerCase().includes(search.toLowerCase()) || data.site.toLowerCase().includes(search.toLowerCase()) || data.screen.toLowerCase().includes(search.toLowerCase()))"
                style="width: 100%">
            <el-table-column
                    label="seq"
                    prop="seq">
            </el-table-column>
            <el-table-column
                    label="研究中心"
                    prop="site">
            </el-table-column>
            <el-table-column
                    label="筛选号"
                    prop="screen">
            </el-table-column>
            <el-table-column
                    align="right">
                <template slot="header" slot-scope="scope">
                    <el-input
                            v-model="search"
                            size="mini"
                            placeholder="输入关键字搜索"/>
                </template>
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleSwitch(scope.$index, scope.row)">切换</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
    <!--    批量操作-->
    <el-drawer
            :title=batchTitle
            :visible.sync="batchCheck"
            direction="rtl"
            size="50%">
        <el-table
                ref="multipleTable"
                :data="tab_list"
                tooltip-effect="dark"
                style="width: 100%"
                @select="handleSelection"
                @select-all="handleSelectionAll">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column property="tab_name" label="数据域名称" width="150"></el-table-column>
            <el-table-column property="tab_content" label="数据域标签" width="200"></el-table-column>
        </el-table>
        <div style="margin-top: 20px">
            <el-button @click="batchCheck = false">取 消</el-button>
            <el-button type="primary" @click="batchCheckSubmit">确 定</el-button>
        </div>
    </el-drawer>
</div>
<script>
  const testHost = 'https://6adb8042-9bc6-4629-82ac-cc0b3ea8c029.mock.pstmn.io/'
  new Vue({
    el: '#app',
    data: {
      subject_list: [], // 受试者列表
      search: '',
      visit_list: [], // 访视列表
      visit: {
        name: '',
        visit_seq: 0
      },
      tab_list: [], // 数据域列表
      dialogVisible: false, // 核查、锁定、解锁对话框
      dialogContent: '',
      dialogSubjectVisible: false, // 切换受试者对话框
      model: {
        id: ''
      },
      batchCheck: false,
      batchTitle: '',
      batchCheckSelect: [],//批量操作选中的值
    },
    mounted: function () {
      this.getVisitList();
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      //批量选择提交事件
      batchCheckSubmit(){
        let batchCheckObj = [] // 发送的参数
        this.batchCheckSelect.map((val)=>{
          batchCheckObj.push(val.id)
        })
        console.log(batchCheckObj)
        // 发送请求
      },
      // 批量选中
      handleSelectionAll(row){
        this.batchCheckSelect = row //赋值
      },
      // 单个选中
      handleSelection(selection){
        this.batchCheckSelect = selection //赋值
      },
      //批量操作
      batchCheckAction() {
        this.batchCheck = true
        this.batchTitle = '批量核查'
      },
      // 切换受试者操作
      handleSwitch(idx,row){
        console.log(idx)
        console.log(row)
        this.dialogSubjectVisible = false
        // 发送请求
      },
      // 受试者切换模态框
      switchSubject() {
        this.dialogSubjectVisible = true
        this.getSubjectList()
      },
      // 对话框确定操作
      dialogConfirm() {
        console.log('确定' + this.model.id)
        this.dialogVisible = false
      },
      //解锁
      tabUnlock(row) {
        this.dialogVisible = true
        this.dialogContent = '确定解锁此数据域？'
        this.model.id = row.id
      },
      //锁定
      tabLock(row) {
        this.dialogVisible = true
        this.dialogContent = '确定锁定此数据域？'
        this.model.id = row.id
      },
      //核查
      tabCheck(row) {
        this.dialogVisible = true
        this.dialogContent = '确定对此数据域核查？'
        this.model.id = row.id
      },
      //跳转到受试者详情页面
      openDetails(row) {
        window.open('/subject/two-details?visit_id=' + encodeURIComponent(row.visit_id) + '&visit_name=' + encodeURIComponent(row.visit_name) + '&subject_id=' + encodeURIComponent(row.subject_id))
      },
      // 获取数据域列表
      tabList(param) {
        this.visit = {
          name: param.visit_name,
          visit_seq: param.visit_seq
        };
        axios.get(testHost + 'subject/tab-list', {
          params: {
            visit_id: param.id
          }
        }).then(
          res => {
            this.tab_list = res.data.data
          }
        ).catch(function (error) {
          console.log(error);
        });
      },
      // 获取访视列表
      getVisitList() {
        //axios.get('/database/visit?id=<?//= $version_id ?>//').then(
        axios.get(testHost + 'subject/visit?id=43').then(
          res => {
            this.visit_list = res.data.data;
            this.tabList(this.visit_list[0]);
          }
        ).catch(function (error) {
          console.log(error);
        });
      },
      // 获取受试者列表
      getSubjectList() {
        //axios.get('/database/visit?id=<?//= $version_id ?>//').then(
        axios.get(testHost + 'subject/subject-list?id=101').then(
          res => {
            this.subject_list = res.data;
            this.getVisitList();
          }
        ).catch(function (error) {
          console.log(error);
        });
      },
    }
  })
</script>
<style>
    table {
        font-size: 14px !important;
    }

    .el-divider--horizontal {
        margin: 5px 0;
    }
</style>